<template>
  <div style="padding: 20px;">
    <si-table
      :table-columns="tableColumns"
      :table-data="tableData"
      :table-operation="tableOperation"
      :is-selection="true"
      @handleSelectionChange="handleSelectionChange"
    >
      <template v-slot:status="props">
        <el-button type="danger" size="small">{{
          props.scope.row.status === 0 ? '启用' : '禁用'
        }}</el-button>
      </template>
      <!-- 自定义操作部分 -->
      <!-- <template v-slot:[tableOperation.param]="props">
        <span v-for="(item, index) in tableOperation.btnList" :key="index" @click="handleClick(props.scope.row, item.type)">{{item.label}}</span>
      </template> -->
    </si-table>
  </div>
</template>

<script>
export default {
  name: 'DemoTable',
  components: {},
  data() {
    return {
      tableColumns: [
        {
          param: 'date',
          lable: '日期',
          sortable: true,
          width: '180px',
          fixed: true
        },
        {
          param: 'name',
          lable: '姓名'
        },
        {
          param: 'status',
          lable: '状态',
          slotName: 'status'
        },
        {
          param: 'address',
          lable: '地址',
          width: '400px'
        },
        {
          param: 'gender',
          lable: '性别',
          render: row => {
            return row.gender === 0 ? '女' : '男'
          }
        }
      ],
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          gender: 0,
          status: 0,
          children: [
            {
              id: '11',
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              gender: 0,
              status: 0
            },
            {
              id: '12',
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              gender: 0,
              status: 0
            }
          ]
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          gender: 1,
          status: 1
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          gender: 0,
          status: 1
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          gender: 0,
          status: 0
        }
      ],
      tableOperation: {
        label: '操作',
        param: 'operate',
        childDefault: false,
        fixed: 'right',
        btnList: [
          {
            label: '编辑',
            click: this.handleEdit
          },
          {
            label: '删除',
            click: this.handleDel
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    handleEdit(row) {
      console.log(row)
      alert('编辑')
    },
    handleDel(row) {
      console.log(row)
      alert('删除')
    },
    handleSelectionChange(val) {
      console.log(val)
    }
  }
}
</script>
